<template>
	<view class="page">
		<navHead :datas="headData"></navHead>
		<template v-if="Object.keys(detail).length > 0">
			<view class="page1">
				<view class="flex-bwt">
					<view class="btn_1 ft flex-center" @click="goOrder(detail.order_id)">{{ "订单详情" }}</view>
					<view class="flex"><text class="ft c-99">拼团说明</text>
						<image class="wh-22 ml-8" src="https://cdn.oss.bon-top.cn/static_bc/images/illus.png"></image>
					</view>
				</view>
				<view class="priceBox mt-30">
					<view class="ft ft-28">首期款{{ detail.is_pay == 0 ? '待支付' : '已支付' }}</view>
					<view class="ft-num mt-10"><text class="ft1">￥</text><text class="ft-num ft-64">{{ detail.price
					}}</text></view>

					<view class="mt-20" v-if="detail.coupon_price_show > 0">
						<text class="ft">{{ '优惠减￥' + detail.coupon_price_show }}</text>
						<text class="ft c-9c" v-if="detail.is_success != 1">{{ ' (请注意优惠券到期时间)' }}</text>
					</view>
				</view>
				<view class="card mt-30 pd-20">
					<!-- 拼团成功 -->
					<image class="ico" src="https://cdn.oss.bon-top.cn/static_bc/images/pin_s.png" mode="widthFix"
						v-if="detail.is_success == 1"></image>
					<!-- 拼团失败 -->
					<image class="ico" src="https://cdn.oss.bon-top.cn/static_bc/images/pin_d.png" mode="widthFix"
						v-if="detail.is_success == 2"></image>
					<view class="ft1 text_center">团友 <text class="ft1 c-9c">2</text> 人以上下订且支付成功即成团</view>
					<view class="ft text_center fw-800 c-9c mt-10" v-if="detail.is_success == 1">
						{{ '拼团用时：' + detail.success_countdown.d + '天' +
							detail.success_countdown.h + '时' + detail.success_countdown.m + '分拼团成功！' }}
					</view>
					<view class="flex-center mt-20" v-if="detail.is_success != 1">
						<view class="mr-10" style="font-weight: 800;font-size: 24rpx;color: #333333;">剩余拼团时间</view>
						<comTimeOut :size="22" :time="detail.end_time_full"></comTimeOut>

						<!-- <template v-if="detail.countdown.d>0">
							<view class="time">{{detail.countdown.d}}天</view>
							<view class="time-i">:</view>
						</template>
<view class="time">{{detail.countdown.h}}</view>
<view class="time-i">:</view>
<view class="time">{{detail.countdown.m}}</view>
<view class="time-i">:</view>
<view class="time">{{detail.countdown.s}}</view> -->
					</view>
					<view class="gree mt-20 text_center ft ft-22 fw-800 flex-center" v-if="detail.is_my == 1">
						<image class="wh-56 pos" src="https://cdn.oss.bon-top.cn/static_bc/images/hongbao.png"></image>
						拼团成功您可得返现 ￥{{ detail.reduce }}
					</view>
					<view class="gree mt-20 text_center ft ft-22 fw-800 flex-center" v-if="detail.is_my == 0">
						<image class="wh-56 pos" src="https://cdn.oss.bon-top.cn/static_bc/images/hongbao.png"></image>
						您的拼团订单已立减 ￥{{ detail.reduce }}
					</view>
					<view class="pers  mt-20">
						<view class="flex" style="width: fit-content;"
							v-for="(item, index) in detail.list.filter(f => f.is_create_order == 1)" :key="index">
							<view class="avt" v-if="item.user_info">
								<image style="border-radius: 50%;" class="wh-100" :src="item.user_info.avatar"
									mode="aspectFill"></image>
							</view>
							<view class="avt" style="border: none;" v-else>
								<image class="wh-100" src="https://cdn.oss.bon-top.cn/static_bc/images/add_bg.png"
									mode="widthFix"></image>
							</view>
							<image class="ml-10 mr-10" style="width: 28rpx;height: 28rpx;"
								src="https://cdn.oss.bon-top.cn/static_bc/images/add.png" v-if="(index + 1) % 4 !== 0">
							</image>
						</view>
						<view class="avt1">
							<image class="wh-100" src="https://cdn.oss.bon-top.cn/static_bc/images/add_bg.png"
								mode="widthFix"></image>
						</view>
					</view>
				</view>

				<view class="card_1 mt-20 pd-20">
					<view class="flex-bwt mb-20">
						<text class="ft c-99">订单号</text>
						<text class="ft c-33">{{ detail.ordernum }}</text>
					</view>
					<view class="flex-bwt mb-20">
						<text class="ft c-99">发起拼团时间</text>
						<text class="ft c-33">{{ detail.start_time }}</text>
					</view>
					<view class="flex-bwt mb-20">
						<text class="ft c-99">拼团截止时间</text>
						<text class="ft c-33">{{ detail.end_time }}</text>
					</view>
					<view class="flex-bwt mb-20">
						<text class="ft c-99">拼团人数</text>
						<text class="ft c-33">{{ detail.count_num }}</text>
					</view>
					<view class="flex-bwt ">
						<text class="ft c-99">拼团成功时间</text>
						<text class="ft c-33">{{ detail.success_time ? detail.success_time : "-" }}</text>
					</view>
				</view>
				<view class="card_2 mt-20 pd-20">
					<view class="flex-eve">
						<text class="ft c-ff">{{ '参与用户' }}</text>
						<text class="ft c-ff">{{ '是否创建订单' }}</text>
						<text class="ft c-ff">{{ '是否支付' }}</text>
					</view>
				</view>
				<view class="card_3">
					<view class="list-item flex-eve pd-20" v-for="(item, index) in detail.list" :key="index">
						<view class="flex">
							<image class="wh-40 mr-10" style="border-radius: 50%;" :src="item.user_info.avatar"
								mode="aspectFill" v-if="item.user_info"></image>
							<image class="wh-40 mr-10" src="https://cdn.oss.bon-top.cn/static_bc/images/avtor.png"
								v-else>
							</image>
							<text class="ft c-33">{{ item.group_title }}</text>
						</view>
						<text style="width: 30%;" class="ft flex-center c-33">{{ item.is_create_order == 1 ? '是' : '-'
						}}</text>
						<text style="width: 30%;" class="ft  flex-center c-33">{{
							item.is_create_order == 1 && item.is_pay_order == 1 ? '是' : (item.is_create_order == 1 ? '否'
								: '-')
						}}</text>
					</view>
				</view>
				<view class="card_7 flex mt-20"
					v-if="detail.is_success == 1 && detail.is_my == 1 && showSuccess == true">
					<view class="box1">
						<view class="dad ft c-ff ft-20 flex-center">{{ '拼团返现' }}</view>
						<view class="flex-center ft-num">{{ '￥' + detail.group_buy_data.reduce }}</view>
						<view class="flex-center   ft-22 c-33">{{ '下订立减,返现券' }}</view>
					</view>
					<view class=" flex-center box2">
						<view class="ft c-33 fw-800">{{ '所有商品可用(不可叠加)' }}</view>
						<view class="ft c-99 ">{{ detail.group_buy_data.start_time + '~' +
							detail.group_buy_data.end_time }}
						</view>
					</view>
				</view>
				<view class="ft c-9c mt-20" v-if="detail.is_success == 2">{{ '拼团失败原因：截止时间之前未能达到拼团要求！' }}</view>
				<view class="ft c-99 mt-20" v-if="detail.is_success != 1">
					{{ '温馨提示：拼团订单支付后如果没有2人以上成团，将没有返现奖励，不影响订单进度，自动转为正常订单。' }}
				</view>

			</view>

			<view style="height: 324rpx;"></view>
			<view class="bottomBtn" v-if="detail.is_my == 0 && detail.is_pay == 0 && detail.is_success != 2">
				<view class="card_4 flex-center ft c-33 fw-800" v-if="detail.pay_num > 0">
					{{ '待您支付即成团本单已立减 -￥' + detail.reduce }}
				</view>
				<view class="card_4 flex-center ft c-33 fw-800" v-else>{{ '2人支付成团返现 ￥' + detail.reduce }}</view>
				<view class="card_5 flex-center">
					<view class="bt1 flex-center" @click="shareGroup">
						<image class="wh-28" style="margin-right: 4rpx;"
							src="https://cdn.oss.bon-top.cn/static_bc/images/sharegroup.png"></image>
						<view class="ft fw-800 c-33">分享拼团</view>
					</view>
					<view class="bt2 flex-center">
						<image class="wh-28" style="margin-right: 4rpx;"
							src="https://cdn.oss.bon-top.cn/static_bc/images/download.png"></image>
						<view class="ft fw-800 c-33" @click="downloadPoster">下载分享海报</view>
					</view>
				</view>
				<view class="card_6 flex-center">
					<view class="sub flex-center ft c-dbf" @click="toPay(detail.order_id)">去支付</view>
				</view>
			</view>

			<view class="bottomBtn" v-if="detail.is_my == 1 && detail.is_success != 1 && detail.is_success != 2">
				<view class="card_4 flex-center ft c-33 fw-800" v-if="detail.is_pay == 1">
					{{ '分享拼团团友2人支付成团返现 ￥' + detail.reduce }}
				</view>
				<view class="card_4 flex-center ft c-33 fw-800" v-else>{{ '2人支付成团返现 ￥' + detail.reduce }}</view>
				<view class="card_5 flex-center">
					<view class="bt1 flex-center" @click="shareGroup">
						<image class="wh-28" style="margin-right: 4rpx;"
							src="https://cdn.oss.bon-top.cn/static_bc/images/sharegroup.png"></image>
						<view class="ft fw-800 c-33">{{ detail.is_pay == 1 ? '分享拼团给微信好友' : '分享拼团' }}</view>
					</view>
					<view class="bt2 flex-center">
						<image class="wh-28" style="margin-right: 4rpx;"
							src="https://cdn.oss.bon-top.cn/static_bc/images/download.png"></image>
						<view class="ft fw-800 c-33" @click="downloadPoster">下载分享海报</view>
					</view>
				</view>
				<view class="card_6 flex-center" v-if="detail.is_pay == 0">
					<view class="sub flex-center ft c-dbf" @click="toPay(detail.order_id)">去支付</view>
				</view>
			</view>
			<view class="bottomBtn" v-if="detail.is_my == 1 && detail.is_success == 1">
				<view class="card_4 flex-center ft c-33 fw-800">{{ '拼团成功返现 ￥' + detail.reduce }}</view>
				<view class="card_6 flex-center">
					<view class="sub flex-center ft c-dbf" @click="showSuccess = true">查看拼团奖励</view>
				</view>
			</view>

			<view class="share_model " v-if="isShare" @click="close">
				<img :src="shareUrl" style="width: 518rpx;height: 776rpx;" mode="widthFix" alt="">
				<view class="btn3 mt-20 flex-center ft ft-28 c-33" @click.stop="downloadPoster">{{ '保存分享海报' }}</view>
			</view>
		</template>
	</view>
</template>
<script setup lang="js">
import {
	onLoad
} from '@dcloudio/uni-app'
import {
	ref,
	reactive,
	onMounted
} from "vue";
import {
	utils
} from "@/utils/utils.js";
import {
	api
} from "@/utils/api.js";

import navHead from '@/components/navHead.vue';
import comTimeOut from '@/components/comTimeOut.vue'

const headData = reactive({
	color: '#fff',
	title: '拼团详情'
})

// import { base64ToPath } from 'image-tools';	
const showSuccess = ref(false)

const isShare = ref(false)
const openModel = () => {
	isShare.value = true
}

const close = () => {
	isShare.value = false
}

const toPay = (id) => {
	uni.navigateTo({
		url: `/subpackage/joinGroup/cashRegister?order_id=${id}`
	});
}

const shareUrl = ref('')
const getShareUrl = (type) => {
	utils
		.request(
			api.getGroupPoster, {
			group_id: group_id.value,
			scene: 'product_id=' + detail.value.product_info.id + '&group_id=' + group_id.value,
			page: 'subpackage/immigration/immigration',
			env_version: 'trial' //要打开的小程序版本。正式版为 "release"，体验版为 "trial"，开发版为 "develop"。默认是正式版。
		},
			"post",
			"application/x-www-form-urlencoded",
			1500,
			false
		)
		.then((res) => {
			shareUrl.value = res
			console.log('shareUrl.value', shareUrl.value)
			if (type == 1) {
				//打开弹窗
				isShare.value = true
			} else if (type == 2) {
				//下载
				downloadImg()
			}
		});
}

const shareGroup = () => {
	if (!shareUrl.value) {
		getShareUrl(1)
	} else {
		isShare.value = true
	}
}

const downloadPoster = () => {
	if (!shareUrl.value) {
		getShareUrl(2)
	} else {
		downloadImg()
	}
}

const downloadImg = () => {
	const base64 = shareUrl.value.replace(/^data:image\/\w+;base64,/, '');
	const filePath = `${wx.env.USER_DATA_PATH}/temp_${Date.now()}.png`;
	uni.getSetting({
		success: (res) => {
			if (!res.authSetting['scope.writePhotosAlbum']) {
				requestAuth(base64, filePath);
			} else {
				saveImage(base64, filePath);
			}
		}
	});
}

// 请求授权
const requestAuth = (base64, filePath) => {
	uni.authorize({
		scope: 'scope.writePhotosAlbum',
		success: () => {
			saveImage(base64, filePath);
		},
		fail: () => {
			uni.showToast({
				title: '请开启相册权限',
				icon: 'none'
			});
			setTimeout(() => {
				uni.openSetting();
			}, 2000);
		}
	});
}

const saveImage = (base64, filePath) => {
	const fs = uni.getFileSystemManager();
	fs.writeFile({
		filePath,
		data: base64,
		encoding: 'base64',
		success: () => {
			uni.saveImageToPhotosAlbum({
				filePath,
				success: () => {
					uni.showToast({
						title: '保存成功'
					});
				},
				fail: (err) => {
					console.log('保存失败', err);
				}
			});
		},
		fail: (err) => {
			console.log('写入失败', err);
		}
	});
}

const group_id = ref('')
const order_id = ref('')
const detail = ref({})
onLoad((options) => {
	if (options.group_id) {
		group_id.value = options.group_id;
		order_id.value = options.order_id ? options.order_id : '';
		utils
			.request(
				api.getGroupDetail, {
				group_id: group_id.value,
				order_id: order_id.value,
			},
				"get"
			)
			.then((res) => {
				detail.value = res.data.info;
				// detail.value.end_time = detail.value.end_time + ':00'
			});
	}
})

const goOrder = (id) => {
	uni.navigateTo({
		url: "/subpackage/orderList/orderDetail?id=" + id,
	});
}
</script>

<style lang="scss" scoped>
.page1 {
	box-sizing: border-box;
	padding-left: 30rpx;
	padding-right: 30rpx;
	padding-top: 30rpx;
}

.scroll-view {
	height: 1160rpx;

}

.btn_1 {
	width: 136rpx;
	height: 58rpx;
	background: #f8f8f8;
	border-radius: 34rpx 34rpx 34rpx 34rpx;
}

.priceBox {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.card {
	width: 690rpx;
	// height: 330rpx;
	background: linear-gradient(180deg, #FFF3EC 0%, #FFFFFF 100%);
	border-radius: 40rpx 40rpx 0rpx 0rpx;
	display: flex;
	flex-direction: column;
	position: relative;
	//justify-content: center;
	align-items: center;

	.gree {
		width: 362rpx;
		height: 44rpx;
		background: linear-gradient(90deg, #DBF046 0%, #BFFFBB 100%);
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		position: relative;

		.pos {
			position: absolute;
			left: -25rpx;
		}
	}

	.ico {
		width: 152rpx;
		height: 148rpx;
		position: absolute;
		right: -30rpx;
		top: -60rpx;
	}

	.time {
		background: #9C0000;
		border-radius: 8rpx;
		padding: 2rpx 6rpx;
		font-weight: 800;
		font-size: 20rpx;
		color: #FFFFFF;
	}

	.time-i {
		margin-left: 2rpx;
		margin-right: 2rpx;
		font-weight: 800;
		font-size: 24rpx;
		color: #333333;
	}

	.pers {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		width: 500rpx;

		// border: 2rpx solid #999;
		.avt {
			width: 84rpx;
			height: 84rpx;
			border: 2rpx solid #333333;
			border-radius: 50%;
		}

		.avt1 {
			width: 84rpx;
			height: 84rpx;
			// background: #DBF046;
			// border: 2rpx solid #333333;
		}

		.add {
			color: #333333;
			font-size: 56rpx;
			font-weight: 900;
		}
	}
}

.card_1 {
	width: 690rpx;
	height: 290rpx;
	background: linear-gradient(180deg, #F8F8F8 0%, #FFFFFF 100%);
	border-radius: 40rpx 40rpx 40rpx 40rpx;
}

.card_2 {
	width: 690rpx;
	height: 74rpx;
	background: #333333;
	border-radius: 40rpx 40rpx 0rpx 0rpx;
}

.card_3 {

	width: 690rpx;
	// height: 160rpx;
	background: #F8F8F8;
	border-radius: 0rpx 0rpx 40rpx 40rpx;
	border: 2rpx solid #F1F1F1;

	.list-item {
		border-bottom: 2rpx solid #F1F1F1;
	}

	.list-item:last-child {
		border-bottom: none;
	}
}

.card_4 {
	// position: fixed;
	// bottom: 192rpx;
	width: 750rpx;
	height: 74rpx;
	background: #FBFFDF;
	box-shadow: 0rpx -2rpx 2rpx 2rpx rgba(0, 0, 0, 0.05);
	border-radius: 0rpx 0rpx 0rpx 0rpx;
}

.card_5 {
	// position: fixed;
	// bottom: 118rpx;
	width: 750rpx;
	height: 74rpx;
	background: #F8F8F8;
	border-radius: 0rpx 0rpx 0rpx 0rpx;

	.bt1 {
		width: 50%;
		border-right: #F1F1F1 2rpx solid;
	}

	.bt2 {
		width: 50%;
	}
}

.card_6 {
	// position: fixed;
	// bottom: 20rpx;
	width: 750rpx;
	height: 98rpx;
	background: #F8F8F8;
	border-radius: 0rpx 0rpx 0rpx 0rpx;

	.sub {
		width: 690rpx;
		height: 78rpx;
		background: #333333;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}
}

.card_7 {
	width: 690rpx;
	height: 244rpx;
	border-radius: 20rpx;
	background-image: url('https://cdn.oss.bon-top.cn/static_bc/images/reward.png');
	background-size: 100% 100%;
	box-sizing: border-box;
	padding-left: 80rpx;
	padding-top: 80rpx;

	.box1 {
		width: 182rpx;
		height: 144rpx;
		background: linear-gradient(90deg, #DBF046 0%, #FFEE7E 100%);
		border-radius: 20rpx 20rpx 20rpx 20rpx;

		.dad {
			width: 88rpx;
			height: 36rpx;
			background: #333333;
			border-radius: 20rpx 8rpx 8rpx 8rpx;
		}
	}

	.box2 {
		width: 350rpx;
		height: 144rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		flex-direction: column;
	}
}

.share_model {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, 0.4);
	background-size: 100% 100%;
	z-index: 999;

	.box2 {
		width: 518rpx;
		height: 776rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		background-image: url('https://cdn.oss.bon-top.cn/static_bc/images/share_m.png');
		background-size: 100% 100%;

		.invite {
			width: 204rpx;
			height: 60rpx;
			background: #333333;
			border-radius: 32rpx 32rpx 32rpx 32rpx;
		}

		.content {
			width: 440rpx;
			height: 340rpx;
			border: 2rpx solid red;
			margin-top: 216rpx;
			margin-left: 20rpx;
		}
	}

	.btn3 {
		width: 278rpx;
		height: 80rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}
}

.bottomBtn {
	position: fixed;
	z-index: 99;
	bottom: 0;
	left: 0;
	background: #F8F8F8;
	width: 100%;
	padding-bottom: env(safe-area-inset-bottom);
}
</style>